<!-- 首页 -->
<template>
	<view class="">
		<view v-if="isshow" class="loading u-flex u-row-center u-row-center">
			<image style="width: 15vw;height: 15vw;" src="@/static/images/loadings.gif"></image>
		</view>
		<view class="navBarBox" style="
				position: fixed;
				z-index: 100;
				background: #fff;
				width: 100%;
			">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view @click="SelectCity" :style="{ height: navBarHeight + 'px' }" class="flex at" style="
					padding: 0 15px;
					display: flex;
					align-items: center;
					justify-content: center;
				">
				<view style="font-size: 28rpx; position: absolute; left: 30rpx">
					{{ city }}
					<u-icon name="arrow-down" size="24"></u-icon>
				</view>
				<view style="font-size: 32rpx; font-weight: bold">
					产业项目
				</view>
			</view>
		</view>
		<view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
		<!-- <uni-nav-bar>/
		    <view>标题栏</view>
		    <view v-slot:left>left</view>
		    <view v-slot:right>right</view>
		</uni-nav-bar> -->
		<!-- <u-sticky> -->
		<!-- <u-navbar :is-back="false" title="众享福泽">
				<view class="slot-wrap">
					<view>
						北京
					</view>
					<view>
						众享福泽
					</view>
				</view>
			</u-navbar> -->
		<!-- </u-sticky> -->

		<view @click="goseach" style="background: #fff; padding: 5px">
			<u-search :disabled="true" margin="30rpx" placeholder="搜索项目" height="64"></u-search>
		</view>
		<view style="
				display: flex;
				align-items: center;
				background: #fff;
				padding: 10rpx;
				margin-top: 10px;
				flex-wrap: wrap;
			">
			<view @click="projiectList(item)" v-if="tablist && tablist.length > 0" v-for="(item, index) in tablist"
				style="text-align: center; margin: 10rpx 0; width: 20%">
				<image style="width: 80rpx; height: 80rpx" :src="item.image" mode=""></image>
				<view style="font-size: 12px; color: #666">
					{{ item.type_name }}
				</view>
			</view>
		</view>
		<view @click="projiectList()" class="goods-tit">
			<!-- <u-section title="产业项目" sub-title="更多"></u-section> -->
			<view class="flex">产业项目</view>
			<view class="flex">
				更多
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
		</view>
		<view class="flex goods-box">
			<view class="mt10 goods-item" v-if="goods" v-for="(item, index) in goods" @click="goodsdetail(item.id)">
				<view class="bga box bg">
					<image :src="item.image" mode="" style="width: 100%; height: 200rpx"></image>
					<view style="
							display: flex;
							align-items: center;
							line-height: 30px;
						" class="f16">
						<view class="lianghang c3" style="padding-right: 10px">
							{{ item.project_name }}
						</view>
						<view style="margin-left: auto" @click.stop="profav(item.id)">
							<u-icon v-if="item.is_fav == 0" name="star" size="30"></u-icon>
							<u-icon v-else color="#ffe413" name="star-fill" size="30"></u-icon>
						</view>
					</view>
					<view class="f14 c6 lianghang">
						<view class="goodsCont" v-html="item.project_desc"></view>
					</view>
				</view>
			</view>
		</view>

		<view style="text-align: center" class="xm" @click="handleJect">
			<view>
				<image src="../../static/xm.png" style="width: 30px; height: 30px; margin-top: 15px" mode=""></image>
			</view>
			我有项目
		</view>
		<shopro-auth-modal></shopro-auth-modal>
		<!-- <u-sticky>
			
		</u-sticky> -->
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	import qqmap from "@/components/qqmap-wx-jssdk.min.js";
	import share from "@/shopro/share";
	import {
		BASE_URL
	} from "@/env";
	export default {
		data() {
			return {
				goods: [],
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 44,
				page: 1,
				city: "定位中...",
				tablist: [],
				district: "",
				total: 0,
				base_url: BASE_URL,
				isshow:true
			};
		},
		computed: {
			...mapGetters([
				"initShop",
				"homeTemplate",
				"userTemplate",
				"hasTemplate",
				"isLogin",
				"userInfo",
				"authType",
			]),
			// // 头部模块数据
			// headSwiperList() {
			// 	if (this.homeTemplate?.length) {
			// 		return this.homeTemplate[0]?.content?.list;
			// 	}
			// },
			// // 分类选项卡数据
			// categoryTabsData() {
			// 	if (this.homeTemplate?.length) {
			// 		return this.homeTemplate[this.homeTemplate.length - 1]?.content;
			// 	}
			// }
		},
		onReachBottomDistance() {
			debugger
			if (this.total >= this.goods.length) return;
			this.page++;
			this.getlist();
		},
		onPullDownRefresh() {
			this.init();
		},

		onShow() {
			if( uni.getStorageSync("project_shuanxi")=='1'||(uni.getStorageSync("countyIds")&&uni.getStorageSync("countyIds")!=uni.getStorageSync("countyId"))){
				this.isshow=true;
				uni.setStorageSync("countyId",uni.getStorageSync("countyIds"))
				this.page = 1;
				this.goods = [];
				this.getmenu();
			}
			
		},
		onHide() {
			// this.enable = false;
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync()["statusBarHeight"];
			console.log(uni.getSystemInfoSync()["statusBarHeight"]);
			this.page = 1;
			this.goods = [];
			this.getmenu();
		},
		methods: {
			getlist() {
				this.$http("project.list", {
					category: 0,
					limit: 10,
					page: this.page,
					city: this.city,
					district: this.district,
				}).then((res) => {
					console.log(res, "goods");
					if (res.code === 1) {
						this.total = res.data.total;
						if (this.page == 1) {
							this.goods = res.data.data;
						} else {
							this.goods = [...this.goods, ...res.data.data];
						}
					}
				});
				this.isshow=false;
				uni.setStorageSync("project_shuanxi", 2);
			},
			getmenu() {
				this.$http("project.getCategory").then((res) => {
					console.log(res, "menu");
					if (res.code === 1) {
						this.tablist = res.data;
					}
					if (uni.getStorageSync("cityName")) {
						this.city = uni.getStorageSync("cityName");
						this.district = uni.getStorageSync("countyName");
						if(uni.getStorageSync("countyIds")){
							uni.setStorageSync("countyId",uni.getStorageSync("countyIds"))
						}
						this.getlist();
					} else {
						this.getcity();
					}
				});
			},
			getcity() {
				let qqmapsdk = new qqmap({
					key: "34GBZ-ZG66D-KV54R-P3DBA-L5F6O-QQFOT",
				});
				uni.getLocation({
					type: "gcj02",
					success: (e) => {
						console.log(e);
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: e.latitude,
								longitude: e.longitude,
							},
							success: (res) => {
								console.log("======地址：", res);
								// address_component:
								// city: "武汉市"
								// district: "江岸区"
								// nation: "中国"
								// province: "湖北省"
								// street: "中山大道"
								// street_number: "中山大道890号"
								this.district =
									res.result.address_component.district;
								console.log(res.result.address_component.city);
								this.city = res.result.address_component.city;
								uni.setStorageSync("areacity", this.city);
								this.getlist();
							},
						});
					},
				});
			},
			// ...mapActions(['appInit', 'getTemplate', 'getCartList']),
			...mapActions(["getUserInfo", "showAuthModal", "getUserData"]),
			// // 初始化
			init() {
				this.getUserInfo()
					.then((res) => {
						console.log(res, "ffffffffffff");
						// uni.stopPullDownRefresh();
					})
					.catch((e) => {
						// uni.stopPullDownRefresh();
					});
			},
			goodsdetail(e) {
				uni.navigateTo({
					url: "/pages/index/project_list/detail?id=" + e,
				});
			},
			projiectList(e) {
				console.log("====2222",e)
				uni.setStorageSync("project_name", e?e.type_name:'产业' );
				uni.navigateTo({
					url: "./project_list/project_list?id=" + (e?e.id:""),
				});
			},
			SelectCity(e) {
				uni.navigateTo({
					url: "/pages/index/city_path/select_city/select_city",
				});
			},
			goseach() {
				uni.navigateTo({
					url: "/pages/index/seach/seach",
				});
			},

			handleJect() {
				console.log(this.userInfo);
				uni.setStorageSync("switch_tijiao","project")
				if (this.userInfo.is_vip == 0) {
					uni.navigateTo({
						url: "/pages/index/project_list/qrorder",
					});
				} else {
					uni.navigateTo({
						url: "/pages/index/projectProp/index?isvip=" +
							this.userInfo.is_vip +
							"&type=" +
							0,
					});
				}
			},
			// 收藏
			profav(id) {
				uni.request({
					url: this.base_url + "/api/info/profav",
					method: "POST",
					header: {
						"Content-Type": "application/json",
						token: uni.getStorageSync("token"),
					},
					data: {
						project_id: id,
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 1) {
							this.page = 1;
							this.getlist();
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
							});
						}
					},
					fail: () => {},
					complete: () => {},
				});
			},
		},
	};
</script>

<style lang="scss">
.loading{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background: #fff;
	z-index: 10000;
}
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.xm {
		width: 70px;
		height: 70px;
		background: linear-gradient(180deg, #f7bb42 0%, #ed861f 100%);
		box-shadow: 0px 0px 8px 0px rgba(131, 86, 37, 0.2);
		position: fixed;
		bottom: 80px;
		right: 10px;
		font-size: 12px;
		color: #fff;
		z-index: 1;
		border-radius: 50%;
	}

	.xm image {
		width: 20px !important;
		height: 20px !important;
	}

	.navBarBox {}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.navBarBox .navBar .logo {
		width: 82rpx;
		height: 82rpx;
		margin-right: 10rpx;
	}

	.goods-tit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 30rpx;
	}

	.goods-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
		background: #fff;
		overflow: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.goods-item {
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
		padding: 20rpx;
		border-radius: 20rpx;
		width: 48%;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.goodsCont {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		font-size: 24rpx;
	}

	.lianghang {
		font-size: 28rpx;
	}

	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		border-bottom: 1rpx solid #eee;
		text-align: center;
	}

	.c3 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>